1. code。記得要在js頁面import這個函數才能用喔~

import React,{useState} from "react";
import Image from "next/image";

function ImageTextToggle(){
    const [displayText, setDisplayText]=useState('');
    //初始文本為空
    //處理點擊圖片事件，根據圖片的不同，設置或隱藏文本
    const handleImageClick=(imageText)=>{
        if(displayText==imageText){
        //如果點擊的圖片已經顯示相同的文本則隱藏文本
            setDisplayText('');
        }else{
        //否則顯示點擊圖片的文本
            setDisplayText(imageText);
        }
    };
    return(
        <div>
            <div className="image-container">
                <Image src="自定義圖片.jpg/.gif/.png/.svg"
                       alt="Image_1"
                       onClick={()=>handleImageClick('自定義文本1')}
                       width={100}
                       height={100}
                       />
                <Image src="自定義圖片.jpg/.gif/.png/.svg"
                       alt="Image_2"
                       onClick={()=>handleImageClick('自定義文本2')}
                       width={100}
                       height={100}
                       />
                <Image src="自定義圖片.jpg/.gif/.png/.svg"
                       alt="Image_2"
                       onClick={()=>handleImageClick('自定義文本3')}
                       width={100}
                       height={100}
                       />

            </div>
            <div className="text-container">
                <p>{displayText}</p>
            </div>
        </div>
    );
}
export default ImageTextToggle;

2. 實作。實際效果有點難以用截圖的方式呈現，所以放上鏈結。